<template>
  <div>
    <div class="base_screen_header">
      <el-button v-if="props.type == 'order'" @click="ticket" type="primary">核销码核销</el-button>
      <div v-else></div>
      <el-form :inline="true" class="base_search_form" @submit.prevent>
        <el-form-item>
          <el-date-picker v-model="date" type="daterange" range-separator="~" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD" @change="searchDate" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="base" @change="searchBase" placeholder="请选择基地" clearable>
            <el-option v-for="(item, index) in baseOptions" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-input v-model="main" @keyup[native].enter="searchMain" @change="searchMain" placeholder="主订单编号"
            :suffix-icon="Search" clearable />
        </el-form-item> -->
        <el-form-item>
          <el-input v-model="orderCode" @keyup[native].enter="searchOrderCode" @change="searchOrderCode"
            placeholder="订单编号" :suffix-icon="Search" clearable />
        </el-form-item>
        <el-form-item>
          <el-input v-model="hotel" @keyup[native].enter="searchHotel" @change="searchHotel" placeholder="酒店名称" clearable
            :suffix-icon="Search" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="name" @keyup[native].enter="searchName" @change="searchName" placeholder="预定人" clearable
            :suffix-icon="Search" />
        </el-form-item>
      </el-form>
    </div>
    <StatusBar :data="statusList" default="all" />
    <div v-if="props.type == 'order'" class="base_main_header">
      <el-button type="primary" text @click="getExport">导出</el-button>
    </div>
    <div v-else class="base_main_margin_top"></div>
    <DataCollectTable :data="data" :total="total" :config="config" @operationsHander="opHander.receive">
    </DataCollectTable>
    <CancelOrder ref="cancelOrderRef" @cancelOrder="cancelOrder"></CancelOrder>
  </div>
</template>

<script setup>
import StatusBar from "@com/StatusBar.vue";
import DataCollectTable from "@com/table/DataCollectTable.vue";
import CancelOrder from "@com/order/CancelOrder.vue";
import {
  OP_KEY,
  COLUMN_TYPE,
  OPERATIONS,
  operationsHander,
} from "@com/table/tableOperations";
import { $msg, $box } from "@ui/msg";
import { ref, reactive, defineProps } from "vue";
import { Search } from "@element-plus/icons-vue";
import useRoute from "@util/router";
import $ from "@util/base";
import configApi from "@api/config";
import api from "@api/order";

const props = defineProps({
  type: {
    type: String,
  },
  routeName: {
    type: String,
  },
});

const route = useRoute();

route.watchRouter(props.routeName, () => {
  getData();
});

// 1023001 未付款 1023002 处理中 1023003 已取消 1023004 待入住 1023005 已完成
const statusList = reactive([
  {
    label: "全部",
    value: "all",
    total: 0,
  },
  {
    label: "处理中",
    value: "1023002",
    total: 0,
  },
  {
    label: "待入住",
    value: "1023004",
    total: 0,
  },
  {
    label: "已完成",
    value: "1023005",
    total: 0,
  },
  {
    label: "订单取消",
    value: "1023003",
    total: 0,
  },
]);

const baseOptions = ref([]);
const base = ref(route.query().base || "");
const main = ref(route.query().main || "");
const orderCode = ref(route.query().orderCode || "");
const hotel = ref(route.query().hotel || "");
const name = ref(route.query().name || "");
const date = ref(route.query().date || []);
const total = ref(0);
const data = ref([]);

getConfig();

function getConfig() {
  configApi.base((val) => {
    baseOptions.value = val;
  });
}

function hotelOperations(data) {
  if (props.type == "order") {
    // 1023001 未付款 1023002 处理中 1023003 已取消 1023004 待入住 1023005 已完成
    switch (data.orderStatus) {
      case "1023002": // 处理中
        return [
          OPERATIONS.check,
          OPERATIONS.cancelOrder,
          OPERATIONS.acceptOrder,
        ];
      case "1023001": // 未付款
        return [OPERATIONS.check, OPERATIONS.cancelOrder];
      case "1023004": //待入住
        return [OPERATIONS.check, OPERATIONS.acceptHotelOrder];
      default:
        return [OPERATIONS.check];
    }
  } else {
    return [OPERATIONS.check];
  }
}

const config = {
  showIndex: true,
  operations: {
    label: "操作",
    width: 120,
    operations: hotelOperations,
  },
  column: [
    // {
    //   label: "主订单编号",
    //   prop: "mainOrderCode",
    //   width: 110,
    // },
    {
      label: "订单编号",
      prop: "orderCode",
      width: 110,
    },
    {
      label: "礼包码编号",
      prop: "exchangeItemCode",
      width: 120,
    },
    {
      label: "酒店名称",
      prop: "hotelName",
    },
    {
      label: "下单时间",
      prop: "createTime",
      width: 100,
    },
    {
      label: "订单状态",
      prop: "orderStatusStr",
      width: 100,
    },
    {
      label: "入住人数",
      prop: "persionNum",
      width: 90,
    },
    {
      label: "归属基地",
      prop: "shopName",
      width: 100,
    },
    {
      label: "预订人信息",
      prop: "guestStr",
      width: 180,
      type: COLUMN_TYPE.tooltip,
      rows: 3,
    },
    {
      label: "分销员",
      prop: "agentMemberName",
      width: 90,
    },
    // {
    //   label: "联系方式",
    //   prop: "phoneNumber",
    //   width: 120,
    // },
    {
      label: "承接人",
      prop: "confirmBy",
      width: 90,
    },
    {
      label: "承接时间",
      prop: "confirmTime",
      width: 100,
    },
    {
      label: "核销人",
      prop: "verifierName",
      width: 90,
    },
    {
      label: "核销时间",
      prop: "verificateTime",
      width: 100,
    },
  ],
};

const cancelOrderRef = ref(null);
let selectOpData = null;

const opHander = operationsHander();
opHander.install(OP_KEY.check, (data) => {
  route.push({
    name: "hotelorderdetails",
    query: { code: data.orderCode },
  });
});

opHander.install(OP_KEY.acceptOrder, (data) => {
  $box.open("二次已确认", "是否二次已确认？", () => {
    api.confirm(
      "hotel",
      data.orderCode,
      () => {
        $msg.succ("二次已确认成功");
        getData();
      },
      (msg) => {
        $box.open("二次已确认失败", msg);
      }
    );
  });
});

opHander.install(OP_KEY.cancelOrder, (data) => {
  selectOpData = data;
  cancelOrderRef.value.show();
});

opHander.install(OP_KEY.acceptHotelOrder, (data) => {
  $box.open("确认入住", "是否确认入住？", () => {
    api.hotelConfirm(
      data.orderCode,
      () => {
        $msg.succ("确认入住成功");
        getData();
      },
      (msg) => {
        $box.open("确认入住失败", msg);
      }
    );
  });
})

function cancelOrder(data) {
  if (selectOpData != null) {
    api.cancel(
      {
        type: "hotel",
        code: selectOpData.orderCode,
        // amount: data.amount,
        remark: data.reason,
      },
      () => {
        $msg.succ("取消成功");
        getData();
      }
    );
  } else {
    $msg.error("请重新选择记录操作");
  }
}

function ticket() {
  $box.input("核销", "核销码", null, (val) => {
    api.ticket(
      "hotel",
      val,
      () => {
        $box.open("提示", "核销成功");
        getData();
      },
      (msg) => {
        $box.open("核销失败", msg);
      }
    );
  });
}

function searchBase(val) {
  route.replaceQuery("base", val);
}

function searchMain(val) {
  route.replaceQuery("main", val);
}

function searchOrderCode(val) {
  route.replaceQuery("orderCode", val);
}

function searchHotel(val) {
  route.replaceQuery("hotel", val);
}

function searchName(val) {
  route.replaceQuery("name", val);
}

function searchDate(val) {
  route.replaceQuery("date", val);
}

getData();
function getData() {
  getNum();
  getList();
}

function getNum() {
  let routeQuery = route.query();
  let params = {
    memberLoginName: routeQuery.login,
    shopCode: routeQuery.base,
    mainOrderCode: routeQuery.main,
    orderCode: routeQuery.orderCode,
    hotelName: routeQuery.hotel,
    guestName: routeQuery.name,
    status: routeQuery.status,
  };
  if ($.isNotEmpty(routeQuery.date)) {
    params.startTime = routeQuery.date[0]
    params.endTime = routeQuery.date[1]
  }
  api.num(params, "hotel", (val) => {
    statusData([
      val.total,
      val.unconfirmed,
      val.unused,
      val.completed,
      val.cancel,
    ]);
  });
}

function statusData(val) {
  statusList.forEach((e, i) => {
    e.total = val[i];
  });
}

function getList() {
  let routeQuery = route.query();
  let params = {
    type: "hotel",
    memberLoginName: routeQuery.login,
    shopCode: routeQuery.base,
    mainOrderCode: routeQuery.main,
    orderCode: routeQuery.orderCode,
    hotelName: routeQuery.hotel,
    guestName: routeQuery.name,
    status: routeQuery.status,
    date: routeQuery.date,
    page: routeQuery.p,
    size: routeQuery.s,
  };

  api.orderList(params, (val) => {
    total.value = val.total;
    // val.list = [{orderStatus: "1023001"}, {orderStatus: "1023002"}, {orderStatus: "1023003"}, {orderStatus: "1023004"}, {orderStatus: "1023005"}]
    data.value = val.list.map((e) => {
      // 1023001 未付款 1023002 处理中 1023003 已取消 1023004 待入住 1023005 已完成
      switch (e.orderStatus) {
        case "1023001":
          e.status = "未付款";
          break;
        case "1023002":
          e.status = "处理中";
          break;
        case "1023003":
          e.status = "已取消";
          break;
        case "1023004":
          e.status = "待入住";
          break;
        case "1023005":
          e.status = "已完成";
          break;
      }
      return e;
    });
  });
}

function getExport() {
  let routeQuery = route.query();
  let params = {
    type: "hotel",
    memberLoginName: routeQuery.login,
    shopCode: routeQuery.base,
    mainOrderCode: routeQuery.main,
    orderCode: routeQuery.orderCode,
    hotelName: routeQuery.hotel,
    guestName: routeQuery.name,
    status: routeQuery.status,
    date: routeQuery.date,
  };
  api.export(params, (val) => {
    $.download(val.url, "酒店订单导出");
  });
}
</script>

<style lang="scss"></style>
